<template>
	<ynet-tab-bar
		v-model="current"
		:items="items"
		:hasInk="false"
	>
		<template slot="item" slot-scope="{ item }">
			<div class="custom-item">
				<div class="icon">
					<md-icon :name="item.icon" />
				</div>
				<div class="text">
					<span v-text="item.label"></span>
				</div>
			</div>
		</template>
	</ynet-tab-bar>
</template>
<script>

	import { TabBar } from 'ynet-mobile'
	import { Icon } from 'mand-mobile'
	export default {
		title: '自定义内容',
		name: 'tab-bar-demo',
		components: {
			[TabBar.name]: TabBar,
			[Icon.name]: Icon
		},
		data(){
			return {
				current: 1,
				items: [
					{name: 1, label: '首页', icon: 'home'}, {name: 2, label: '我的', icon: 'user'}
				]
			}
		}

	}
</script>
<style lang="scss">
	.custom-item{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100%;
		flex: 1;
		.text{
			font-size: 20px
		}
	}
</style>